<template>
  <div id="app">
    <el-container>
      <el-header height="150">
        <div style="width: 1200px;margin: 0 auto">
          <img src="" style="width: 300px;vertical-align: middle" alt="">
          <span>
           <a href="">用户登录</a><el-divider direction="vertical"></el-divider>
          <a href="">用户注册</a><el-divider direction="vertical"></el-divider>
          <a href="">我要卖车</a><el-divider direction="vertical"></el-divider>
          <a href="">个人中心</a><el-divider direction="vertical"></el-divider>
        </span>
        </div>
      </el-header>
      <el-main style="width: 1200px;margin: 0 auto">
        <!--轮播图和排行榜开始-->
        <el-row :gutter="20">
          <el-col :span="18">
            <el-carousel trigger="click" height="300px">
              <el-carousel-item v-for="item in bannerArr">
                <img  :src="item.url" width="100%" alt="">
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
        <!--轮播图和排行榜结束-->
        <!--商品列表开始-->
        <el-row :gutter="20">
          <el-col :span="8" v-for="p in carArr" style="margin-top: 20px">
            <el-card>
              <a :href="'/detail.html?id='+p.id">
                <img class="p_img" :src="p.picture" width="100%" height="233" alt="">
              </a>
              <div>
                <a style="text-decoration:none;color: #333333" :href="'/detail.html?id='+p.id">
                  <p style="font-size: 15px;height: 40px;margin-top: 0">{{p.brand}}</p>
                </a>
                <div style="color: #666">
                  <span>￥{{p.price}}</span>
                  <s style="font-size: 12px">{{}}</s>
                  <span style="float: right">销量:{{}}</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-pagination
              background
              @current-change="handleCarSelect"
              layout="prev, pager, next"
              :total="1000" >
          </el-pagination>
        </el-row>
        <!--商品列表结束-->
      </el-main>
      <el-footer>
        <div style="height: 100px;background-color: #3f3f3f;
            padding: 30px;text-align: center;color: #b1b1b1">
          <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
          <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
          <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {//在这里面定义变量
      bannerArr:[],
      carArr:[],
        page: {
          pageOffset: 1, // 分页页码, 默认第一页
          pageCount: 20, // 一页的页数, 默认20
        },
        allData: [], // 表格所有数据的数据源
        tableData: [] // 表格数据源
    }
  },
  created () {
   this.handleCarSelect(1);

  },
  methods:{

    handleCarSelect(index) {//index代表的是分类的id
      if(index<1){
        index = 1;
      }
      let url = 'http://192.168.0.192:9080/infors/'+this.nowPage+'/selectCar'
      this.axios
          .get(url)
          .then((response) => {
            let responseBody = response.data;
            console.log('接收到服务器端响应的结果：');
            console.log(responseBody);
            this.carArr = responseBody;
          });

    },
    handleBannerArr(index) {//index代表的是分类的id
      let url = 'http://localhost:9081/index/bannerArr'
      this.axios
          .get(url)
          .then((response) => {
            let responseBody = response.data;
            console.log('接收到服务器端响应的结果：');
            console.log(responseBody);
            this.bannerArr = responseBody.data;
          });

    },
    search(){
      //跳转到结果页面
      location.href="/result.html?wd="+v.wd;
    }
  }
}
</script>

<style>
  body{

  }
</style>